<template>
	<view>
		<uni-nav-bar :fixed="true" left-icon="back" color="#156DAC" @clickLeft="pageback">
			<view class="header-icon-text-panel">
				<text class="title">添加运维表单</text>
			</view>
		</uni-nav-bar>
		<view>
			<uni-forms class="right-form" :value="formData" ref="form" :rules="rules" errShowType="toast">
				<view class="form-content"  style="margin: 30upx auto;padding-top: 30upx;">
					<uni-forms-item required label="项目部" name="projectDepartmentId" v-if="formData.outletName">
						<view class="form-ipt" @click="showPkPicker">
							<text v-if="formData.projectDepartmentName">{{formData.projectDepartmentName}}</text>
							<text class="placeholder" v-else>请选择项目部</text>
						</view>
					</uni-forms-item>
					<uni-forms-item required label="企业" name="enterpriseId" v-if="formData.outletName">
						<view class="form-ipt" @click="showPkPicker">
							<text v-if="formData.enterpriseName">{{formData.enterpriseName}}</text>
							<text class="placeholder" v-else>请选择企业</text>
						</view>
					</uni-forms-item>
					<uni-forms-item required label="排放口" name="outletId">
						<view class="form-ipt" @click="showPkPicker">
							<text v-if="formData.outletName">{{formData.outletName}}</text>
							<text class="placeholder" v-else>请选择排放口</text>
						</view>
					</uni-forms-item>
					<uni-forms-item required label="签到时间" name="checkInTime">
						<TimeSelector
							ref="stime"
							class="form-ipt"
						    showType="dateToTime"
							@btnConfirm="(e)=>dateChange(e,'checkInTime')"
						>
						    <text v-if="formData.checkInTime">{{formData.checkInTime}}</text>
							<text v-else style="color: grey;">请选择签到时间</text>
						</TimeSelector>
					</uni-forms-item>
					<uni-forms-item required label="设备类型" name="equipmentId">
						<!-- <uni-easyinput class="form-ipt" type="password" v-model="formData.checkPass" placeholder="请确认密码" maxlength="20"/> -->
						<lb-picker class="form-ipt" v-model="formData.equipmentId" :list="typeList" :props="pickerProps" @confirm="(e)=>pickerSelectConfim('equipment',e)">
							<view class="form-ipt">
								<text v-if="formData.equipmentName" class="lb-picker-text">{{formData.equipmentName}}</text>
								<text v-else class="placeholder">请选择设备类型</text>
							</view>
						</lb-picker>
					</uni-forms-item>
					<tki-tree class="ipt-ctl" ref="tkitree" :range="range" :rangeKey="rangeKey" confirmColor="#4e8af7" @confirm="pkConfirm"/>
				</view>
				<button class="form-btn" @click="submitForm">保存</button>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	const saveUrl = '/business/maintenance/addMaintenance'
	const getTree = '/base/outlet/listTree'	
	const getTypeUrl = '/base/tOutletEquipment/selectTEquipmentType'
	
	import TimeSelector from '@/components/wing-time-selector/wing-time-selector.vue';
	import LbPicker from '@/components/lb-picker'
	import {parseTime} from '@/common/util.js'
	
	export default {
		components:{
			TimeSelector,LbPicker
		},
		data() {
			return {
				range: [],
				rangeKey: 'name',
				pickerProps: {
					label: 'name',
					value: 'equipmentId',
				},
				typeList: [],
				rules: {
					outletId: {
						rules: [
							{ required: true, errorMessage: '请选择排放口'},
						]
					},
					projectDepartmentId: {
						rules: [
							{ required: true, errorMessage: '请选择项目部'},
						]
					},
					enterpriseId: {
						rules: [
							{ required: true, errorMessage: '请选择企业'},
						]
					},
					checkInTime: {
						rules: [
							{ required: true, errorMessage: '请选择签到时间'},
						]
					},
					equipmentId: {
						rules: [
							{ required: true, errorMessage: '请选择设备类型'},
						]
					},
					
				},
				formData:{
					outletId: null,
					outletName: '',
					projectDepartmentId: null,
					projectDepartmentName: '',
					enterpriseId: null,
					enterpriseName: '',
					equipmentId: null,
					equipmentName: '',
					checkInTime: null
				},
			}
		},
		onLoad() {
			this.formData.checkInTime = parseTime(new Date(),'{y}-{m}-{d} {h}:{i}:{s}');
			this.getTreeData();
			// this.getTypeData()
		},
		methods: {
			pageback(){
				uni.navigateBack({
					delta: 1
				});
			},
			getTypeData(outletId) {
				this.$api.request(getTypeUrl,{
					method: 'get',
					data: {
						outletId: outletId
					}
				}).then(res=>{
					console.log(res)
					if(res.success){
						this.typeList = res.data.list
					}
				}).catch(()=>{
				})
			},
			showPkPicker() {
				this.$refs.tkitree._show()
			},
			pkConfirm(e) {
				debugger
				if(e.length > 0){
					const item = e[0]
					const parents = item.parents
					this.formData.projectDepartmentId = item.projectDepartmentId
					this.formData.projectDepartmentName = parents[0].name
					this.formData.enterpriseId = item.enterpriseId
					this.formData.enterpriseName = parents[1].name
					this.formData.outletId = item.id
					this.formData.outletName = item.name
					this.getTypeData(item.id)
				}
			},
			getTreeData() {
				this.$api.request(getTree,{
					method: 'get',
				}).then(res=>{
					if(res.success){
						const result = []
						res.data.list.map(item=>{
							if(item.children && item.children.length > 0){
								result.push(item)
							}
						})
						this.range = result
					}
				}).catch(()=>{
				})
			},
			pickerSelectConfim(key,e) {
				debugger
				const {item} = e
				// console.log(item)
				const {equipmentId, name} = item
				this.formData[key+ 'Id'] = equipmentId
				this.formData[key+'Name'] = name
			},
			dateChange(res,type){
				console.log(res)
				this.formData[type] = res.key
			},
			submitForm(){
				this.$refs.form.submit().then((res)=>{
					// console.log('表单返回得值：', res)
					const {oldPass,newPass,checkPass} = res
					uni.showLoading({
						title:'保存中',
						mask: true
					})
					this.$api.request(saveUrl,{
						method: 'post',
						data: this.formData
					}).then(res=>{
						uni.hideLoading()
						if(res.success){
							this.$api.toastMsg('保存成功','success')
							setTimeout(()=>{
								// uni.navigateBack()
								let id = res.data.id
								uni.navigateTo({
									url:`/pages/devopsDetail/devopsDetail?type=update&id=${id}`
								})
							},1000);
						}
						
					}).catch(()=>{
						uni.hideLoading()
					})
				}).catch(err=>{
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form-ipt{
		line-height: 72upx;
		.placeholder{
			color: grey;
		}
	}
</style>
